<template>
  <div class="csbaseBox1">
    <div class="boxTitle">设备控制</div>
    <ul class="boxLis">
      <li
        v-for="tab in tabs"
        :key="tab.id"
        class="tab-item"
        :class="{ active: activeTab === tab.id }"
        @click="setActiveTab(tab.id)"
        :data-tab="tab.id"
      >
        {{ tab.name }}
      </li>
    </ul>
    <div class="content1">
      <ul>
        <li
          v-for="tabContent in tabContents"
          :key="tabContent.id"
          class="contList"
          :data-tab-content="tabContent.id"
          :style="{ display: activeTab === tabContent.id ? 'block' : 'none' }"
        >
          <component :is="tabContent.component" />
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">

import { ref } from 'vue'
import VentilationLighting from './VentilationLighting.vue'
import FilmMachine from './FilmMachine.vue'
import ShadeVent from './ShadeVent.vue'
import CultivationRack from './CultivationRack.vue'
import FertilizerMachine from './FertilizerMachine.vue'

const activeTab = ref('devices')

const tabs = [
  { id: 'devices', name: '通风补光' },
  { id: 'field', name: '卷膜机' },
  { id: 'camera', name: '遮阳开窗' },
  { id: 'soil', name: '栽培架' },
  { id: 'fertilizer', name: '施肥机' }
]

const tabContents = [
  { id: 'devices', component: VentilationLighting },
  { id: 'field', component: FilmMachine },
  { id: 'camera', component: ShadeVent },
  { id: 'soil', component: CultivationRack },
  { id: 'fertilizer', component: FertilizerMachine }
]

const setActiveTab = (tabId: string): void => {
  activeTab.value = tabId
}
</script>

<style scoped>
.boxLis {
  display: flex;
  justify-content: space-around;
  align-items: center;
  width: 80%;
  height: 1.8vw;
  color: #fff;
  text-align: center;
  line-height: 1.8vw;
  margin: 0 auto;
  padding: 0 4.5%;
}

.tab-item {
  flex: 1;
  cursor: pointer;
  font-size: 0.5vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 组件样式已在引入的CSS文件中定义 */
.contList {
  position: relative;
  width: 100%;
  height: 6vw;
  margin: 0.1vw auto 0;
}

.content1 li {
  display: none;
}

.content1 li:target {
  display: block;
}

.csbaseBox1 {
  position: relative;
  z-index: 999;
}
.boxTitle {
  font-size: .8vw;
  width: 38%;
  margin-left: 10%;
  text-align: left;
  color: #0efcff;
}

</style>
